<template>
  <div ref="containerDOM" class="container">
    <div style="width:50%;height:100%">
      <div class="area1">
        <div class="area1-title">
          <svg-icon class="icon" icon-class="data"/>
          <page :propPages="getTotalPage('audit', 12)" :propCurrent="current1" propVertical />
        </div>
        <van-swipe :autoplay="frameDelay" indicator-color="white" @change="handleCurrent1Change">
          <van-swipe-item v-for="page in getTotalPage('audit', 12)" :key="page">
            <div style="display:flex;flex-wrap:wrap">
              <div class="task-item" v-for="(task, index) in getPage('audit', page, 12)" :key="task.busKey">
                <dist-item :value="task" :propIndex="(page-1)*12+index+1" :propIndexStyle="{'background-color': '#39a9ed'}"/>
              </div>
            </div>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
            </div>
          </template>
        </van-swipe>
      </div>
      <div class="area2">
        <div class="area2-title"><svg-icon class="icon" icon-class="data"/></div>
        <div class="task-item" v-for="(task, index) in filterDist('picking')" :key="task.busKey">
          <dist-item :value="task" :propIndex="index+1" :propIndexStyle="{'background-color': '#ccc'}"/>
        </div>
      </div>
    </div>
    <div style="width:50%;">
      <div class="area3">
        <div class="area3-title"><svg-icon class="icon" icon-class="iot"/></div>
        <van-swipe :autoplay="frameDelay" indicator-color="white">
          <van-swipe-item v-for="page in getTotalPage('picked', 8)" :key="page">
            <div style="display:flex;flex-wrap:wrap">
              <div class="task-item" v-for="(task, index) in getPage('picked', page, 8)" :key="task.busKey">
                <dist-item :value="task" :propIndex="(page-1)*8+index+1" :propIndexStyle="{'background-color': '#bbb'}"/>
              </div>
            </div>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
            </div>
          </template>
        </van-swipe>
      </div>
      <div class="area4">
        <div class="area4-title"><svg-icon class="icon" icon-class="complete"/></div>
        <div class="task-item" v-for="(task, index) in filterDist('end')" :key="task.busKey">
          <dist-item :value="task" :propIndex="index+1" :propIndexStyle="{'background-color': 'rgb(150, 200, 155)'}"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Page from '@/components/Page.vue'
import DistItem from './DistItem.vue'

export default {
  data() {
    return {
      frameDelay: 5000,
      current1: 0,
      dists: [
        {
          deptName: '心血管病区一',
          busDate: '09:45',
          distSummary: '一次性注射器等 250 件',
          busKey: 'DI200500001',
          flowStatus: 'audit'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500002',
          flowStatus: 'audit'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500003',
          flowStatus: 'audit'
        },

        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500005',
          flowStatus: 'audit'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500006',
          flowStatus: 'audit'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500007',
          flowStatus: 'audit'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500008',
          flowStatus: 'audit'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500009',
          flowStatus: 'audit'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500029',
          flowStatus: 'audit'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500039',
          flowStatus: 'audit'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500049',
          flowStatus: 'audit'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500059',
          flowStatus: 'audit'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500012',
          flowStatus: 'picking'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500013',
          flowStatus: 'picking'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500014',
          flowStatus: 'picked'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500015',
          flowStatus: 'picked'
        },
        {
          deptName: '心血管病区二',
          busDate: '09:45',
          distSummary: '一次性注射器等 800 件',
          busKey: 'DI200500016',
          flowStatus: 'end'
        }

      ],
      distItems: []
    }
  },
  created() {
    this.refreshData()
    this.intervalId = setInterval(this.refreshData, 10000)
  },
  destroyed() {
    clearInterval(this.intervalId)
  },
  mounted() {

  },
  filters: {

  },
  computed: {

  },
  methods: {
    handleCurrent1Change(page) {
      console.log(page)
      this.current1 = page + 1
    },
    filterDist(flowStatus) {
      return this.dists.filter(item => item.flowStatus == flowStatus)
    },
    getTotalPage(flowStatus, size) {
      let findArray = this.dists.filter(item => item.flowStatus == flowStatus) || []
      return Math.ceil(findArray.length / size)
    },
    getPage(flowStatus, page, size) {
      let findArray = this.dists.filter(item => item.flowStatus == flowStatus) || []
      return findArray.filter((item, index) => index >= (page - 1) * size && index < page * size) || []
    },
    refreshData() {
      this.utils.loadShow()
      this.$ajax.get('/wm/dist/getDistSchedule', {}).then(response => {
        if (response.success) {
          this.dists = response.data.dists || []
          this.distItems = response.data.distItems || []
          this.processData()
        }
        this.utils.loadHide()
      }).catch(err => {
        this.utils.loadHide()
      })
    },
    processData() {
      this.distEnd = []
      this.distAudit = []
      this.distPicking = []
      this.distPicked = []
      this.distEnd = []
      this.dists.forEach(dist => {
        // 添加配送摘要
        const distItems = this.distItems.filter(dt => dt.distId == dist.id)
        let skuQtySum = 0
        distItems.forEach(distItem => { skuQtySum += distItem.skuQty })
        if (distItems.length > 1) {
          const first = distItems[0]
          this.$set(dist, 'distSummary', `${first.matrName} 等共 ${skuQtySum} 件`)
        } else if (distItems.length == 1) {
          const first = distItems[0]
          this.$set(dist, 'distSummary', `${first.matrName} ${skuQtySum} 件`)
        } else {
          this.$set(dist, 'distSummary', '无明细')
        }
      })
    }
  },
  components: {
    DistItem, Page
  },
  watch: {
  }

}
</script>

<style lang="scss" scoped>
  $paddingForTitle: 40px;
  $titleWidth: 35px;
  $titleBorderColor: #fff;
  $titleBorder: 0px solid #fff;
  .container {
    width: 100%;
    height: 95%;
    overflow: hidden;
    display: flex;
  }
  .task-item {
    width: 220px;
    margin: 8px 0 0 8px;
  }
  .area {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

  }
  .area-title {
    position: absolute;
    height: 100%;
    width: $titleWidth;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding:5px;
    color:white;
    font-size:16px;
    .icon {
      font-size: 24px;
    }
  }
  .area1 {
    @extend .area;
    height: 75%;
    padding-left: $paddingForTitle;
    background-color: #39a9ed;
  }
  .area2 {
    @extend .area;
    height: 25%;
    padding-left: $paddingForTitle;
    background-color: #ccc;
  }
  .area3 {
    @extend .area;
    height: 50%;
    padding-left: $paddingForTitle;
    background-color: #bbb;
  }
  .area4 {
    @extend .area;
    height: 50%;
    padding-left: $paddingForTitle;
    background-color: rgb(155, 200, 155);
  }
  .area1-title {
    @extend .area-title;
    left:0;
    border-right: $titleBorder;
  }
  .area2-title {
    @extend .area-title;
    left:0;
    border-right: $titleBorder;
  }
  .area3-title {
    @extend .area-title;
    left:0;
    border-right: $titleBorder;
  }
  .area4-title {
    @extend .area-title;
    left:0;
    border-right: $titleBorder;
  }
   .my-swipe .van-swipe-item {
    color: #fff;
    height:100%;
    font-size: 20px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
